<script setup>
import { storeToRefs } from 'pinia'
import { useMapStore } from '@/stores/map'

const { currentShop, isShowPopup } = storeToRefs(useMapStore())

// 跳转到商家详情或景点详情
function goDetail() {
  if (currentShop.value.type === 'merchant')
    uni.navigateTo({ url: `/pages/shop/view/shop-detail?id=${currentShop.value.id}` })
  else
    uni.navigateTo({ url: `/pages/play/view/map-scenic-spot-detail?id=${currentShop.value.id}` })
}
// 显示定位
function onShowAddress() {
  uni.openLocation({
    latitude: +currentShop.value.latitude,
    longitude: +currentShop.value.longitude,
    name: currentShop.value.name,
    address: currentShop.value.address,
  })
}
</script>

<template>
  <nut-popup v-model:visible="isShowPopup" position="bottom" round :custom-style="{ height: '290px' }">
    <view class="pt-6">
      <view class="px-2.5 mb-3.5 center overflow-hidden">
        <image class="rounded h-295 w-full" :src="currentShop?.cover" mode="scaleToFill" />
      </view>
      <h4 class="font-semibold text-center">
        {{ currentShop?.name }}
      </h4>
      <nut-config-provider :theme-vars="{ 'button-border-width': '0px' }">
        <view class="mx-2.5 mt-3.5 rounded flex overflow-hidden">
          <view class="w-2/3">
            <nut-button block shape="square" custom-color="#FF7E00" @click="goDetail">
              查看详情
            </nut-button>
          </view>
          <view class="w-1/3">
            <nut-button block shape="square" custom-color="#FFA44B" @click="onShowAddress">
              导航到此
            </nut-button>
          </view>
        </view>
      </nut-config-provider>
    </view>
  </nut-popup>
</template>
